<template>
	<!-- 收货地址 -->
	<view class="ReceivingAddress">
		<u-navbar title="收货地址列表" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight"></u-navbar>
		<!-- 如果地址列表不为空， -->
		<view class="section p-20">
			<view class="address_Details b-r-10 m-b-10" v-for="(item, index) in addressList" :key="index" @click="selectAddress(item)">
				<view class="address_Details_top font-30">
					<view style="margin-right: 20upx;">{{item.receiveName}}</view>
					<view>{{$dealTel(item.receiveMobile)}}</view>
				</view>
				<view class="address_Details_Middle font-30">{{item.receiveProvince}}{{item.receiveCity || ''}}{{item.receiveArea || ''}}{{item.receiveTown == '无' ? '' : (item.receiveTown || '')}}{{item.receiveAddress}}</view>
				<view class="address_Details_Bottom">
					<view class="left"></view>
					<view class="left" v-if="!item.defaultFlag"></view>
					<view class="right">
						<view class="delte b-r-10" @click.stop="delAddress(item)">删除</view>
						<view class="edit b-r-10" @click.stop="toAddressEdit('edit', item)">编辑</view>
					</view>
				</view>
				<view class="default bg-yellow color-w p-l-20 p-r-20 p-t-4 p-b-4" v-if="item.defaultFlag">默认</view>
			</view>
			<empty text="暂无数据..."  :show="addressList.length == 0" />
		</view>
		<!-- 地址列表为空 -->
		<view class="save" @tap="toAddressEdit('add')"><view class="btn">新增地址</view></view>
	</view>
</template>

<script>
import { receiveList, delReceive } from '@/common/api/customer.js'
export default {
	data() {
		return {
			isDefault: true,
			addressList: []
		};
	},
	onShow() {
		this.getAddressList()
	},
	methods: {
		delAddress(item) {
			uni.showModal({
				content: '是否确认删除地址',
				success: res => {
					if (res.confirm) {
						delReceive(item.receiveId).then(res => {
							if(res.code == 200) {
								this.$msg('删除成功')
								this.getAddressList()
							} else {
								this.$msg(res.msg)
							}
						})
					}
				}
			})
		},
		selectAddress(item) {
			let pages = getCurrentPages()
			var beforePagePath = pages[pages.length - 2].route; // 前一个页面
			// 如果是个人中心进入，则点击后不返回
			if(beforePagePath === 'pages/my/my'){
				return
			}
			uni.$emit('selectAddressInfo', item)
			uni.navigateBack()
		},
		getAddressList() {
			receiveList().then(res => {
				this.addressList = res.data || []
			})
		},
		toAddressEdit(type, item) {
			if(type == 'add') {
				uni.navigateTo({
					url: '/pages/my/address/addressEdit?from=' + type
				})
			} else {
				uni.navigateTo({
					url: '/pages/my/address/addressEdit?from=' + type + '&addressId=' + item.receiveId
				})
			}
		}
	}
};
</script>

<style lang="scss">
::v-deep .uni-radio-input-checked{
	background-color: #ECA52B !important;
	border-color:  #ECA52B !important;
}
page {
	background-color: #f2f2f2;
}
.ReceivingAddress {
	.section {
		padding-bottom: 120upx;
		font-size: 32upx;
		.address_Details {
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			.address_Details_top {
				display: flex;
				justify-content: flex-start;
			}

			.address_Details_Middle {
				margin-top: 10rpx;
				color: #999;
			}

			.address_Details_Bottom {
				margin-top: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.uni-radio-input {
						border-radius: 0 !important;
					}
				}

				.right {
					display: flex;
					font-size: 24upx;
					border-radius: 20upx;
					color: #ECA52B;

					.delte {
						padding: 10upx 20upx;
						margin-right: 20upx;
						border: 2rpx solid #ECA52B;
					}

					.edit {
						padding: 10upx 20upx;
						border: 2rpx solid #ECA52B;
					}
				}
			}
			.default {
				position: absolute;
				top: 0upx;
				right: 0upx;
				font-size: 24upx;
				border-radius: 0 10rpx;
			}
		}
	}
}
.save {
	position: fixed;
	bottom: 0%;
	width: 100%;
	height: 120upx;
	line-height: 120upx;
	//background-color: #fff;
	.btn {
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
		width: 70%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 80upx;
		// background: linear-gradient(90deg,$p-color 0%,#ffffff 100%)
		background: #ECA52B;
		color: #ffffff;
		text-align: center;
		margin: 18upx auto;
		.icon {
			height: 80upx;
			color: #fff;
			font-size: 30upx;
			justify-content: center;
			align-items: center;
		}
		font-size: 30upx;
	}
}
</style>
